<!DOCTYPE HTML>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>聊天室</title>
  <script src="./js/jquery.min.js"></script>
  <script src="./js/canvi.js"></script>
  <script src="./js/layui.all.js"></script>
  <link rel="stylesheet" type="text/css" href="./css/demo.css" />
  <link rel="stylesheet" type="text/css" href="./css/normalize.css" />
  <link rel="stylesheet" type="text/css" href="./css/canvi.css" />
  <link rel="stylesheet" type="text/css" href="./css/login.css" />
  <link rel="stylesheet" type="text/css" href="./css/layui.css" />
  <!--the css for jquery.mCustomScrollbar-->
  <link rel="stylesheet" href="./css/jquery.mCustomScrollbar.min.css" />
  <!--the css for this plugin-->
  <link rel="stylesheet" href="./css/jquery.emoji.css" />
  <!--(Optional) the js for jquery.mCustomScrollbar's addon-->
  <script src="./js/jquery.mousewheel-3.0.6.min.js"></script>
  <!--the js for jquery.mCustomScrollbar-->
  <script src="./js/jquery.mCustomScrollbar.min.js"></script>
  <!--the js for this plugin-->
  <script src="./js/jquery.emoji.js"></script>
  <!--vue-->
  <script src="./js/vue.min.js"></script>
  <!--引入变量-->
  <script src="./js/common.variate.js"></script>
  <script src="./js/socket.io.js"></script>
  <script src="./js/common.js"></script>
  <script src="./js/user.js"></script>
  <script src="./js/setmessage.js"></script>
  <link rel="stylesheet" type="text/css" href="./css/csshake.min.css">

</head>

<body style="background-color: rgb(230, 230, 230)">
  <aside id="aside" class="myCanvasNav canvi-navbar" data-position="left" data-push-content="false"
    style="width: 100vw;" inert="" aria-hidden="true">
    <div id="canvi" class="canvi-user-info" style="padding-top: 20px;padding-bottom: 20px;">
      <div class="canvi-user-info__data">
        <input type="text" id="roomId" style="display: none" />
        <span id="activeRoom" class="canvi-user-info__title"></span>
        <a id="activeUser" class="canvi-user-info__meta">开心畅聊每一天😘</a><br>
      </div>

    </div>
    <ul id="cebian" class="canvi-navigation">
    </ul>
  </aside>

  <main class="js-canvi-content canvi-content"></main>

  <div>
    <button id="btn" style="display: none" class="js-canvi-open-button--left btn">查看在线人数</button>
    <div style="display: none;">
      <div>
        <span>昵称：</span>
        <input id="nick" type="text">
      </div>
      <div>
        <span>房间：</span>
        <input id="room" type="text">
      </div>
      <div>
        <span>用户ID：</span>
        <input id="userId" type="text">
      </div>
    </div>

    <div id="message" style="display: none"></div>

    <div id="footer" class="footer">
      <div id="toolbar" style="padding: 5px;">
        <img id="emoji" v-bind:title="emojiTips" src="icon/emoji.png" style="width: 26px;margin-left: 10px">
        <img id="clear" v-bind:title="clearTips" onclick="emptyScreen()" src="icon/clear.png"
          style="width: 23px;margin-left: 10px">
        <form style="display: block;float: left;">
          <a href='javascript:void(0);' class="blueButton" style="height: 25px;line-height:25px;">发图</a>
          <input type="file" class="myFileUpload" name="file" id="img" onchange="sendImg('img')"
            style="height: 25px;line-height:25px;" />
        </form>
        <form style="display: block;float: left;">
          <a href='javascript:void(0);' class="blueButton" style="height: 25px;line-height:25px;">文件</a>
          <input type="file" class="myFileUpload" name="file" id="file" onchange="sendImg('file')"
            style="height: 25px;line-height:25px;" />
        </form>
        <img id="send" v-bind:title="sendTips" onclick="send()" src="icon/send.png"
          style="width: 24px;position: absolute;right: 10px">
      </div>
      <div id="text" contenteditable="true"></div>
    </div>


  </div>

  <div class="login" id="window">
    <div class="login-title">咨询客服</div>
    <div class="login-input-content">
      <div class="login-input">
        <label>昵称：</label>
        <input type="text" placeholder="请输入昵称" id="nickname" class="list-input" />
      </div>
      <div class="login-input">
        <label>ID：</label>
        <input type="text" placeholder="请输入ID" onfocus="allRoom(this)" id="roomname" class="list-input" list="rooms" />
        <datalist id="rooms"></datalist>
      </div>

    </div>
    <div class="login-button" onclick="editNick()"><a style="text-decoration:none;color:#ffffff;"
        href="javascript:void(0);" id="login-button-submit">进入</a></div>
  </div>

</body>

<script type="text/javascript">

  window.onfocus = function () {
    focus = false;
  };
  window.onblur = function () {
    focus = true;
  };

  // for IE
  document.onfocusin = function () {
    focus = false;
  };
  document.onfocusout = function () {
    focus = true;
  };


  var targetId;
  var sessionId;
  var scene;
  var userId;
  var targetType;


  //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
  window.onbeforeunload = function () {
    websocket.close();
  }

  //发送消息
  function send(data, type, filename) {
    var msgBak = document.getElementById('text').innerHTML;
    // 转换emoji
    $($("#text").children(".emoji_icon")).each(function () {
      $(this).prop('outerHTML', textHead + $(this).attr("src").split(emojiPath)[1] + textFoot);
    });
    var msg = data ? data : document.getElementById('text').innerHTML;
    var type = type ? type : "text";
    if (msg != null && msg != "") {
      msg = msg.replace(/"/g, "'");
      if (msg.length < 8000) {
        websocket.emit('message', {
          sessionId: sessionId,
          sendUser: userId,
          targetId: targetId,
          targetType: targetType,
          origin: "customer",
          scene: scene,
          msgtype: type,
          type: "message",
          message: msg,
          filename: filename
        });
        document.getElementById('text').innerHTML = null;
        // setMessageInnerHTML2(nick, text2Emoji2(msg), shakeList[shakeNum]);
      } else {
        $("#text").html(msgBak);
        layer.msg("文本太长了，少写一点吧😭", { anim: 6 });
      }
    } else {
      layer.msg("发空消息是什么意思呢？🤔", { anim: 6 });
    }
  }


  // 将文本转换回emoji图片
  function text2Emoji2(emojiMsg) {
    return emojiMsg.replace(new RegExp(textHead, "g"), emojiHead).replace(new RegExp(textFoot, "g"), emojiFoot);
  }

  //发送昵称和房间号
  function sendnick(nick, userId) {
    document.getElementById('text').innerHTML = null;
    document.getElementById('activeRoom').innerText = 'ID:' + userId;
    document.getElementById('activeUser').innerText = '昵称:' + nick;
    document.getElementById('roomId').value = userId;

    $('#btn').trigger("click");
    $('body').css("background-image", "none");
    $("#window").animate({ top: '-100%' }, 500);
    $("#footer").animate({ bottom: '0px' }, 400);
    $("#message").show();
    //因为该方法会引起较近的动画卡顿，所以让他先老实一会儿
    setTimeout(function () { loadEmoji(); }, 500);

    initSocket(userId, nick)
  }

  // 加载表情，这个方法需要一定时间，因此可能造成肉眼可见的卡顿


  //监听按键
  $(document).keydown(function (e) {
    // 回车键发送消息
    if (e.keyCode == 13) {
      var topValue = $("#window").css('top');
      var topPx = topValue.substring(0, topValue.length - 2);
      if (topPx > 0) {
        editNick();
      } else {
        send();
        return false;
      }
    }
  });

  //发送消息后自动滚到底部
  function scrollToEnd() {
    var h = $("html,body").height() - $(window).height();
    $("html,body").animate({ scrollTop: h }, 200);
  }

  //设置房间号和昵称并发送，再模拟‘#btn’的点击事件，以弹出侧边栏
  function editNick() {
    var nickname = $("#nickname").val();
    var roomname = $("#roomname").val();
    document.getElementById('nick').value = nickname;
    document.getElementById('room').value = roomname;
    sendnick(nickname, roomname);
  }



  var t = new Canvi({
    content: ".js-canvi-content",
    isDebug: !1,
    navbar: ".myCanvasNav",
    openButton: ".js-canvi-open-button--left",
    position: "left",
    pushContent: !1,
    speed: "0.2s",
    width: "100vw",
    responsiveWidths: [{
      breakpoint: "600px",
      width: "21%"
    }, {
      breakpoint: "1280px",
      width: "21%"
    }, {
      breakpoint: "1600px",
      width: "21%"
    }]
  })




  function Map2Json(map) {
    var str = "{";
    map.forEach(function (value, key) {
      str += '"' + key + '"' + ':' + '"' + value + '",';
    })
    str = str.substring(0, str.length - 1)
    str += "}";
    return str;
  }

  new Vue({
    el: '#toolbar',
    data: {
      emojiTips: emojiTips,
      clearTips: clearTips,
      sendTips: sendTips,
    }
  })

  new Vue({
    el: '#canvi',
    data: {
      msgSwitchTips: msgSwitchTips
    }
  })

</script>

</html>